<template>
  <!-- This section should be hidden by default and shown when there are todos -->
  <section class="main">
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="allChecked" @change="$emit('wholeChangeList', allChecked)" />
    <label for="toggle-all">全部标记为已完成</label>
    <ul class="todo-list">
      <!-- These are here just to show the structure of the list items -->
      <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
      <li v-for="item in list" v-show="item.flag" :key="item.id" :class="{completed:item.isDone}">
        <div class="view">
          <input class="toggle" type="checkbox" :checked="item.isDone" @change="$emit('handleChangeList',item.id,!item.isDone)" />
          <label>{{item.name}}</label>
          <button class="destroy" @click="$emit('handleDeleteList' , item.id)"></button>
        </div>
        <input class="edit" value="Create a TodoMVC template" />
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  data(){
    return {
      allChecked:false
    }
  },
  props:{
    list:{
      type:Array
    }
  },
  watch:{
    list:{
      handler() {
        this.allChecked = 
        this.list
        .filter(item => item.flag)
        .find(item => !item.isDone) 
        ? false :true
      },
      deep:true
    }
  }
}
</script>

<style></style>
